<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Register</title>
        <link href="../css/default.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
    </head>
   
    <body>
        <div id="wrapper">
        <!-- Common Header for our site -->
		<div id="header">
		    <div id="logo">
		        <h1><a href="../login/index.html">Face Clock</a></h1>
		        <h2><a href="../login/index.html">Serving Guests Since 2017</a></h2>
		    </div>
		    <!-- end div#logo -->
		    <!-- end div#menu -->
		</div>
            <!-- end div#header -->
            <div id="page">
                <div id="content">
                    <div id="welcome">
                        <h2></h2>
                        <!-- Fetch Rows -->
                        <table class="aatable">
                                <tr><td colspan='2'><b>Register</b></td></tr>
                                <tr><td>EmpID:</td><td><input type='text' name='empid' id='empid' value=''/></td></tr>
                                <tr><td>User Name:</td><td><input type='text' name='username' id='username' value=''/></td></tr>
<!--                                 <tr><td>First Name:</td><td><input type='text' name='firstname' id='firstname' value=''/></td></tr> -->
<!--                                 <tr><td>Last Name:</td><td><input type='text' name='lastname' id='lastname' value=''/></td></tr> -->
<!--                                 <tr><td>Chinese Name:</td><td><input type='text' name='namec' id='namec' value=''/></td></tr> -->
<!--                                 <tr><td>Japanese Name:</td><td><input type='text' name='namej' id='namej' value=''/></td></tr> -->
<!--                                 <tr><td>Sex:</td><td><input type='radio' name='sex' id='sex' value='male' checked='true'/>Male<input type='radio' name='sex' id='sex'  value='female'/>Female</td></tr> -->
<!--                                 <tr><td>Phone:</td><td><input type='text' name='phone' id='phone' value=''/></td></tr> -->
<!--                                 <tr><td>Mobile:</td><td><input type='text' name='mobile' id='mobile' value=''/></td></tr> -->
<!--                                 <tr><td>Address:</td><td><textarea name='address' id='address' value=''></textarea></td></tr> -->
<!--                                 <tr><td>Address 2:</td><td><textarea name='address1' id='address1' value=''></textarea></td></tr> -->
                                <tr><td>Password</td><td><input type='password' name='password' id='password' value=''/></td></tr>
                                <tr><td>Confirm Password</td><td><input type='password' name='confirmpassword' id='confirmpassword' value=''/></td></tr>
                                <input type="file" id="imagefile">
							    <hr>
							    <img style="max-height: 300px; height: 8em; min-width:8em;">
							    <hr>   
		                        <textarea id="image" name="image" cols="40" rows="8"></textarea><br/>
                                <tr><td colspan='2'><input type='button' value='Register' onclick="register()"/>&nbsp;<input type='button' value='Cancel' onclick="location.href='../login/index.html'"/></td></tr>
                        </table>
                    </div>
                    <!-- end div#welcome -->			
                    
                </div>
                <!-- end div#content -->
                <div id="sidebar">
                </div>
                <!-- end div#sidebar -->
                <div style="clear: both; height: 1px"></div>
            </div>
            <!-- Common footer for our site -->
			<div id="footer">
			    <p id="legal">Copyright &copy; 2017 Infosys. All Rights Reserved.<br/>
			    </p>
			</div>
        </div>
        <!-- end div#wrapper -->
    </body>
<script>
   function run(input_file,get_data){
       /*input_file：文件按钮对象*/
       /*get_data: 转换成功后执行的方法*/
       if ( typeof(FileReader) === 'undefined' ){
           alert("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");
       } else {
           try{
               /*图片转Base64 核心代码*/
               var file = input_file.files[0];
               //这里我们判断下类型如果不是图片就返回 去掉就可以上传任意文件
               if(!/image\/\w+/.test(file.type)){
                   alert("请确保文件为图像类型");
                   return false;
               }
               var reader = new FileReader();
               reader.onload = function(){
                   get_data(this.result);
               }
               reader.readAsDataURL(file);
           }catch (e){
               alert('图片转Base64出错啦！'+ e.toString())
           }
       }
   }
   $(function () {
      $("#imagefile").change(function () {
          run(this, function (data) {
              $('img').attr('src',data);
              var str = data.split(",")[1];             
              $('#image').val(str);
          });
      });
   });
   
   function register(){
   	$.ajax({
   		type : "post",
   		url : "../loginfacade/registerUserFacade",
   		dataType : 'json',
   		data : {
   			empid:$("#empid").val(),
   			username:$("#username").val(),
   			firstname:"",
   			lastname:"",
   			namec:"",
   			namej:"",
   			sex:"male",
   			phone:"",
   			mobile:"",
   			address:"",
   			address1:"",
   			password:$("#password").val(),  
   			confirmpassword:$("#confirmpassword").val(),   			
   			image : $("#image").val(),

   		},
   		success : function(data, textStatus) {
   			debugger;
   			if (data.success) {
   				window.location.href = "../login/register.html"
   			}else{
   				alert(data.errorMessage);
   			}
   		},
   		complete : function(XMLHttpRequest, textStatus) {
   		},
   		error : function(XMLHttpRequest, textStatus, errorThrown) {
   			alert("Error:" + textStatus);
   			alert(errorThrown.toString());
   		}
   	});
   }
</script>
</html>
